<template>
  <div class="simulationMain">
    <!-- v-for="(el, index ) in questionList " :key="index" -->
    <div class="questionWrap"
         v-if="questionList.length"
         :class='{"hide":lastQuestion||showQuestion}'>
      <swiper :current="swiperCopy"
              @change="swiperChangeItem">
        <div v-if=questionList.length>
          <div class="guide">
            <swiper-item>
              <div>
                <p>单选题</p>
                <img :src=guide
                     alt="">
              </div>
            </swiper-item>
          </div>
          <div v-for="(item,index) in questionList.length&&questionList"
               :key=index>
            <swiper-item>
              <div class="question">
                <div class="questionNum">
                  <p class="p1"
                     :data-id=item.id>第{{index+1}}题
                    <span v-if="index===questionList.length-1"
                          @click.stop="navToScore">完成测试</span>
                  </p>
                </div>
                <div class="questionContent">
                  <div class="questionTitle">
                    {{item.question}}
                  </div>
                  <div class="questionAnswer"
                       :data-answer=item.answer>
                    <div v-for="(value,key2,index2) in answer_list2[index]"
                         :key=index2>
                      <p @click.stop="choise(index,key2,index2)"
                         :class='{"right":questionList[index].activeIndex*1 ===key2}'>
                        <span>{{options[key2]}}</span>
                        {{value}}
                      </p>
                    </div>
                  </div>
                </div>
                <!-- 解析 -->
                <div class="anaylise"
                     v-if="questionList[index].activeIndex>=0"
                     :data-index="questionList[index].activeIndex">
                  <div class="answerTips">
                    <span v-if="item.answer === options[commitKey]"
                          style="color:#00cc76">回答正确</span>
                    <span v-else>回答错误，正确答案为：{{item.answer}}，您选择的答案是：{{options[commitKey]}}</span>
                  </div>
                  <div class="analyseAnswer">
                    <p>正确答案：{{item.answer}}</p>
                    <p>所在章节：{{item.location}} </p>
                    <p>知识点： {{item.point}} </p>
                    <p>答案解析：</p>
                    <p>{{item.analysis}}</p>
                  </div>
                </div>
              </div>
            </swiper-item>
          </div>
        </div>
      </swiper>
    </div>
    <div v-if="noData"
         class="noData">
      <img :src=noDataPng>
    </div>
    <div class="examOver"
         :class="showExamOver">
      <img src="../../../static/images/examBg.png"
           alt=""
           class="examBg">
      <p class="tips">一共{{questionList.length}}道题，
        <span v-if='count ==questionList.length'>已全部作答</span>
        <span v-else>还有{{questionList.length-count }}道题未作答</span>
      </p>
      <div class="questionBtn">
        <span @click.stop="navRoom">重新做题</span>
      </div>
    </div>
    <div class="markBottom"
         :class='{"hide": lastQuestion}'>
      <p class="iconfont icon-love"
         v-if="swiperCurrent==0"></p>
      <p class="iconfont icon-love"
         v-else
         :class='{"collectActive":questionList.length && questionList[swiperCurrent-1].collection*1 ===1}'
         @click.stop="addToCollect(swiperCurrent-1,questionList[swiperCurrent-1].id)"></p>
      <p class="iconfont icon-tubiaozhizuomoban"
         @click.stop="navToMenu(false)"></p>
      <p class="iconfont icon-timer">
        <span>{{startHour}}:{{startMin}}:{{startSecond}}</span>
      </p>
      <p>
        <button class="iconfont  icon-share2"
                :data-id=testpaperId
                open-type="share"></button>
      </p>
    </div>
    <!-- 答题部分 -->
    <div class="menuMain "
         :class='{"showmenuMain":showmenuMain}'>
      <div class="topicSelect">
        <div class="singleSelection">
          <p class="title">1.单选题</p>
          <div class="singleList">
            <span v-for="(el,i) in MultiSelection"
                  :key=i
                  @click.stop="addActive(i)"
                  :class="el.active ?'active':''">{{i+1}}</span>
          </div>
        </div>
      </div>
      <div class="fixedBtn">
        <span @click.stop=naviBack>继续练习</span>
        <!-- <span @click.stop="navToScore">提交试卷</span> -->
      </div>

    </div>
    <div class="timeOver"
         v-if="showTimeData">
      <div class="imgOver slideInDown animated"
           :animation="animationData">
        <img :src=img>
        <span class="confirmBtn"
              @click.stop="confirm">确定</span>
      </div>
    </div>
  </div>
</template>
  <script>
import { mapState, mapMutations } from 'vuex'
// import { formatTime } from '@/utils'

export default {
  data () {
    return {
      index: 0,
      index2: 0,
      lastQuestion: false,
      showQuestion: false,
      startTimeStamp: 0,
      startSecond: 0,
      startMin: 0,
      startHour: 0,
      timer: null,
      commitAnswer: [],
      examRecord: [],
      commitItem: -1, // 试卷的某一道题
      examPaperId: -1, // 选择考卷的id
      showBottom: false, // 最后一页 隐藏底部工具
      clickAnswer: '',
      showmenuMain: false, // 展示菜单页面
      MultiSelection: [], // 答题选项
      currentIndex: -1,
      commitKey: '',
      count: 0,
      rightTotal: 0,
      totalTime: '',
      rightAnswerArray: [],
      collectArray: [],
      questionList: [],
      options: ['A', 'B', 'C', 'D'],
      answer_list2: [],
      guide: './../../static/images/prev.png',
      noDataPng: './../../static/images/noData.png',
      swiperCurrent: 0,
      testpaperId: -1,
      examTime: 0,
      noData: false,
      showTimeData: false,
      img: './../../static/images/timeUp.png'

    }
  },
  onShareAppMessage (options) {
    this.shareId = options.target.dataset.id
    console.log(this.shareId)
    if (options.target.dataset.id) {
      return {
        title: '答题',
        path: '/pages/sharePage/main?shareId=' + options.target.dataset.id
      }
    }
  },
  computed: {
    ...mapState({
      device: state => state.device,
      examPaper: state => state.examPaper,
      randomRecord: state => state.randomRecord,
      userInfo: state => state.userInfo
    }),
    height () {
      return this.device.height
    },
    showExamOver () {
      if (this.showmenuMain || this.showQuestion) {
        return 'hide'
      } else if (this.lastQuestion) {
        return 'show'
      } else {
        return ''
      }
    }
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setExamPaper', 'setrandomRecord']),
    swiperChangeItem (e) {
      console.log('swiperChangeItem')
      if (e.mp.detail.source === 'touch') {
        console.log(e)
        if (parseInt(e) >= 0) {
          this.swiperCurrent = e
        } else {
          this.swiperCurrent = e.mp.detail.current
        }
        this.swiperCopy = this.swiperCurrent
      }

      console.log(this.swiperCurrent)
    },
    swiperChange (e) {
      console.log('swiperChange')
      console.log(e)
      if (parseInt(e) >= 0) {
        this.swiperCurrent = e
      } else {
        this.swiperCurrent = e.detail.current
      }
      console.log(this.swiperCurrent)
    },
    navRoom () {
      wx.navigateBack({
        delta: 2
      })
    },
    navToScore () {
      let that = this
      this.lastQuestion = true
      console.log(this.rightAnswerArray)
      console.log(this.currentIndex, '当前currentIndex')
      console.log(JSON.stringify(this.commitAnswer))
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.commitAnswer[i]) {
          this.commitAnswer[i] = {
            index: i,
            id: this.questionList[i].id,
            res: this.options.indexOf(this.commitAnswer[i]),
            right: this.commitAnswer[i] === this.rightAnswerArray[i] ? '1' : '0'
          }
        } else {
          this.commitAnswer[i] = {
            index: i,
            id: this.questionList[i].id,
            res: undefined,
            right: 0
          }
        }
      }
      for (let k in this.MultiSelection) {
        if (this.MultiSelection[k].active) {
          this.count++
        }
      }
      this.$http.post('https://dati.co-links.com/operat/recording/', {
        paperid: that.$mp.query.paperId,
        userid: that.userid,
        user_answer_list: JSON.stringify(this.commitAnswer),
        long_time: that.startHour * 3600 + that.startMin * 60 + that.startSecond * 1,
        push_type: 2,
        paperName: that.$mp.query.paperName
      }).then((res) => {
        console.log(res)
      })
    },
    choise (index, key, j) {
      console.log(this.questionList)
      console.log(index, key, j)
      this.questionList[index].hide = false
      this.clickAnswer = key
      // this.commitAnswer[index] = j
      this.commitItem = index
      this.questionList[index].activeIndex = key
      this.questionList[index].rightNum2 = this.questionList[index].rightNum
      this.currentIndex = index
      this.commitKey = key
      this.rightAnswerArray[index] = this.questionList[index].answer
      this.commitAnswer[index] = this.options[key]
      this.rightAnswer = this.questionList[index].rightNum
      for (var k = 0; k < this.commitAnswer.length; k++) {
        this.MultiSelection[index].active = true
      }
    },
    nextQuestion () {
      if (this.index === this.questionList.length - 1) {
        this.lastQuestion = true
        clearInterval(this.timer)
        this.clickAnswer = ''
        this.commitAnswer[this.currentIndex] = this.commitKey
        for (var i = 0; i < this.commitAnswer.length; i++) {
          if (this.commitAnswer[i] !== undefined) {
            console.log(i, this.commitAnswer[i])
            this.count++
          }
        }
        // this.currentIndex = -1
        this.commitKey = ''
        this.setExamPaper({
          rightAnswerArray: this.rightAnswerArray,
          commitAnswer: this.commitAnswer,
          paperId: this.examPaperId,
          collectId: [],
          clickArray: this.commitAnswer,
          totalNum: this.questionList.length
        })
        // return false
      } else {
        this.commitAnswer[this.currentIndex] = this.commitKey
        // this.currentIndex = -1
        this.commitKey = ''
        console.log(this.commitAnswer)
        this.setExamPaper({
          clickArray: this.commitAnswer
        })
        this.index++
      }
    },
    // 计时
    fill_zero_prefix (num) {
      return num < 10 ? '0' + num : num
    },
    startCountTime () {
      let that = this
      clearInterval(that.timer)
      let i = 0
      that.timer = setInterval(function () {
        i++
        if (i === that.examTime * 60) {
          that.showTimeData = true
        } else {
          that.startSecond = that.fill_zero_prefix(that.startSecond * 1 + 1)
          if (that.startSecond === 59) {
            that.startMin = that.fill_zero_prefix(that.startMin * 1 + 1)
            that.startSecond = that.fill_zero_prefix(0)
          }
          if (this.startMin === 59) {
            that.startHour = that.fill_zero_prefix(that.startHour * 1 + 1)
            that.startMin = that.fill_zero_prefix(0)
          }
        }
      }, 1000)
    },
    navToMenu (flag) {
      // console.log(flag)
      if (flag) {
        this.lastQuestion = false
        this.showQuestion = true
      } else {
        this.lastQuestion = true
      }
      // console.log(this.lastQuestion)
      this.showmenuMain = true
      this.count = 0
      console.log(this.commitAnswer)
    },
    // // 收藏
    addToCollect (index, id) {
      let that = this
      if (index === -1) {
        return false
      }
      if (this.questionList[index].collection === 1) {
        this.questionList[index].collection = 0
        this.$http.post('https://dati.co-links.com/operat/del_collection', {
          userid: that.userid,
          questionid: id
        }).then((res) => {
          console.log(res)
        })
      } else {
        this.questionList[index].collection = 1
        this.$http.post('https://dati.co-links.com/operat/collection/', {
          userid: that.userid,
          questionid: id
        }).then((res) => {
          console.log(res)
        })
      }
    },
    addActive (i) {
      this.showmenuMain = false
      this.lastQuestion = false
      this.showQuestion = false
      console.log(i)
      this.swiperChange(i * 1 + 1)
      this.currentIndex = i
    },
    naviBack () {
      this.showmenuMain = false
      this.lastQuestion = false
      this.showQuestion = false
    },
    init () {
      let that = this
      this.userid = this.userInfo.user_id || wx.getStorageSync('user_id')
      this.paperId = this.$mp.query.paperId
      this.number = this.$mp.query.number
      this.paperName = this.$mp.query.paperName
      this.testpaperId = this.$mp.query.paperId
      that.questionList = []
      wx.showLoading({
        title: '请稍后'
      })
      console.log(this.paperName)
      if (parseInt(this.paperId) >= 0) {
        this.$http.post('https://dati.co-links.com/operat/strong_post/', {
          paperid: that.paperId,
          userid: that.userid,
          number: 200
        }).then((res) => {
          console.log(res)
          console.log(res.data.data)
          wx.hideLoading()
          if (res.data.data.length === 0) {
            that.noData = true
          } else {
            that.noData = false
          }
          that.questionList = res.data.data
          for (var i in that.questionList) {
            that.questionList[i].activeIndex = -1
            that.questionList[i].hide = true
            that.answer_list2[i] = that.questionList.length && Object.keys(that.questionList[i].answer_list).map(key => that.questionList[i].answer_list[key]).sort((a, b) => {
              return a.localeCompare(b)
            })
          }
          that.MultiSelection = []
          that.examPaperId = that.$mp.query.id
          that.index = that.$mp.query.defaultItem * 1
          for (var m = 0; m < that.questionList.length; m++) {
            that.MultiSelection.push({
              active: false
            })
          }
          console.log(that.questionList)
        })
      } else {
        wx.showModal({
          title: '参数错误,请稍后再试'
        })
      }
    }
  },
  mounted () {
    this.init()
    this.timer = null
    this.collectArray = []
    this.examTime = this.$mp.query.examTime
    this.startCountTime()
    this.count = 0
    this.startSecond = '00'
    this.startMin = '00'
    this.startHour = '00'
    if (this.startHour === 0) {
      this.startHour = '0' + this.startHour
    }
    if (this.startMin === 0) {
      this.startMin = '0' + this.startMin
    }
    if (this.startSecond === 0) {
      this.startSecond = '0' + this.startSecond
    }
    this.MultiSelection = []
    this.examPaperId = this.$mp.query.id
    this.index = this.$mp.query.defaultItem * 1
    console.log(this.commitAnswer)
    console.log(this.examPaper)
    if (this.randomRecord.finishStatus === 1) {
      // 试卷已提交  清空之前的状态
      this.lastQuestion = false
      this.showQuestion = false
      this.showmenuMain = false
      this.lastQuestion = false
      this.rightTotal = 0
      this.startSecond = '00'
      this.startMin = '00'
      this.startHour = '00'
      this.commitAnswer = []
      for (let i = 0; i < this.questionList.length; i++) {
        this.questionList[i].activeIndex = -1
      }
    }
    for (var i = 0; i < this.questionList.length; i++) {
      this.MultiSelection.push({
        active: false
      })
    }
  },
  onUnload () {
    this.multiIndex = '请选择章节'
    this.multiIndex2 = '— 请选择知识点 —'
    this.examTime = 0
    console.log('unload')
    clearInterval(this.timer)
  },
  onShow () {
    clearInterval(this.timer)
    this.showmenuMain = false
    this.lastQuestion = false
  }
}
</script>
 <style >
swiper {
  height: 100%;
}

.simulationMain {
  height: 100%;
}

.questionWrap {
  height: calc(100% - 45px);
  overflow-y: scroll;
}

.question {
  padding: 0 32rpx;
  margin-bottom: 20rpx;
  overflow-y: scroll;
}

.question .questionNum {
  font-size: 30rpx;
  color: #333;
  height: 98rpx;
  line-height: 98rpx;
  border-bottom: 2rpx solid #e6e6e6;
}

.question .questionNum p {
  display: inline-block;
}

.question .questionNum .p2 {
  float: right;
  width: 112rpx;
}

.question .questionNum .p2 span {
  display: inline-block;
  width: 112rpx;
  height: 46rpx;
  background: #febd32;
  color: white;
  font-size: 26rpx;
  text-align: center;
  line-height: 46rpx;
  border-radius: 6rpx;
  -webkit-border-radius: 6rpx;
}

.question .questionNum .p1 {
  display: block;
}
.question .questionNum .p1 span {
  display: inline-block;
  width: 290rpx;
  height: 76rpx;
  text-align: center;
  line-height: 76rpx;
  background: #00cc76;
  border-radius: 12rpx;
  -webkit-border-radius: 12rpx;
  color: #fff;
  font-size: 28rpx;
  color: #fff;
  float: right;
  margin-top: 13rpx;
}

.question .questionTitle {
  font-size: 32rpx;
  color: #333333;
  padding: 20rpx 0;
}

.questionContent {
  overflow-y: scroll;
}

.questionContent p,
.questionAnswer p {
  font-size: 32rpx;
  color: #666666;
  padding: 18rpx 0;
  padding-left: 30rpx;
}

.questionContent p span,
.questionAnswer p span {
  display: inline-block;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 1px solid #a5a5a5;
  text-align: center;
  line-height: 48rpx;
}

.questionContent p.active,
.questionAnswer p.active {
  color: #ef5151;
}

.questionContent p.active span,
.questionAnswer p.active span {
  border: 1px solid #ef5151;
  background: #ef5151;
  color: white;
}

.questionContent p.right {
  color: #00cc76;
}

.questionContent p.right span {
  background: #00cc76;
  color: #fff;
  border: 1px solid #00cc76;
}

.analyseAnswer {
  padding: 20rpx 22rpx;
  background: #ebebeb;
  font-size: 32rpx;
  color: #333333;
  border-radius: 12rpx;
  -webkit-border-radius: 12rpx;
  height: 350rpx;
  overflow-y: scroll;
}

.analyseAnswer p {
  line-height: 50rpx;
}

.analyseAnswer p:last-child {
  font-size: 28rpx;
}

.markBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  border-top: 2rpx solid #e6e6e6;
}

.markBottom p {
  display: inline-block;
  width: 25%;
  height: 100%;
  line-height: 90rpx;
  font-size: 50rpx;
  color: #333;
  text-align: center;
}

.markBottom p span {
  display: inline-block;
  font-size: 28rpx;
  margin-left: 10rpx;
  line-height: 90rpx;
  height: 100%;
  vertical-align: top;
}

.examOver {
  text-align: center;
  display: none;
}

.examBg {
  width: 242rpx;
  height: 224rpx;
  padding-top: 180rpx;
}

.tips {
  text-align: center;
  font-size: 32rpx;
  color: #333333;
  padding-top: 50rpx;
}

.questionBtn {
  text-align: center;
  position: relative;
  margin-top: 200rpx;
}

.questionBtn .next {
  background: #00cc76;
  color: white;
  margin-left: 88rpx;
}

.questionBtn .disabled {
  background: #ccc;
  color: white;
  border: 2rpx solid #ccc;
}

.questionBtn .disabled {
  background: #ccc;
  color: white;
  border: 2rpx solid #ccc;
}

.questionBtn .nextBtn {
  display: none;
}

.questionBtn span,
.questionBtn button {
  display: inline-block;
  width: 210rpx;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  border-radius: 10rpx;
  -webkit-border-radius: 10rpx;
  border: 2rpx solid #00cc76;
  font-size: 28rpx;
  color: #00cc76;
}

.hide {
  display: none !important;
}

.show {
  display: block;
}

.questionBtn .show {
  display: inline-block;
}

.markBottom .collectActive {
  color: #ef5151;
}

.menuMain {
  background: #f7f7f7;
  /* display: none; */
}

.menuMain .showmenuMain {
  display: block;
}

.singleSelection,
.MultiSelection,
.checkSelection {
  padding: 0 32rpx;
  margin-bottom: 20rpx;
  background: white;
}

.singleSelection .title,
.MultiSelection .title,
.checkSelection .title {
  padding-top: 20rpx;
  font-size: 32rpx;
  color: #333333;
}

.singleList {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 30rpx;
}

.singleList span {
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #666666;
  font-size: 32rpx;
  text-align: center;
  line-height: 60rpx;
  background: #e6e6e6;
  margin: 20rpx;
}

.singleList span.active {
  background: #00cc76;
  color: white;
}

.anaylise {
  overflow-y: scroll;
  padding-bottom: 90rpx;
  height: 400rpx;
}

.fixedBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 88rpx;
  border-top: 1px solid #e6e6e6;
  background: white;
}

.fixedBtn span {
  display: inline-block;
  margin-top: 8rpx;
  width: 292rpx;
  height: 72rpx;
  text-align: center;
  line-height: 72rpx;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 12rpx;
  -webkit-border-radius: 12rpx;
  background: #00cc76;
}

.fixedBtn span:nth-child(2) {
  margin-left: 38rpx;
}

.answerTips {
  font-size: 30rpx;
  margin: 20rpx 0rpx 28rpx 0rpx;
  border-radius: 12rpx;
  -webkit-border-radius: 12rpx;
  background: #ebebeb;
}

.answerTips span {
  display: inline-block;
  padding: 10rpx 22rpx;
}

.guide {
  height: calc(100% + 90rpx);
  background: red;
  z-index: 2;
}

.guide img {
  display: block;
  width: 320rpx;
  height: 320rpx;
  margin: 0 auto;
  margin-top: 50rpx;
}

.guide swiper-item {
  overflow-y: scroll;
}

.guide swiper-item div {
  height: 100%;
  width: 100%;
}

.guide swiper-item div p {
  margin-top: 100rpx;
  font-size: 26rpx;
  color: #000;
  padding: 0 32rpx;
}

.noData {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 4;
  background: white;
}

.noData img {
  position: absolute;
  display: block;
  width: 300rpx;
  height: 300rpx;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.timeOver {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.imgOver {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 418rpx;
  height: 400rpx;
}

.imgOver img {
  width: 418rpx;
  height: 284rpx;
  position: relative;
}

.confirmBtn {
  display: inline-block;
  padding: 10rpx 20rpx;
  background: #f7b552;
  border-radius: 10rpx;
  position: absolute;
  width: 180rpx;
  text-align: center;
  bottom: 0px;
  left: 50%;
  font-size: 36rpx;
  text-align: center;
  color: white;
  margin-left: -100rpx;
  letter-spacing: 5rpx;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -200%, 0), scale3d(0.3, 0.3, 0.3);
    transform: translate3d(0, -200%, 0), (0.3, 0.3, 0.3);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
</style>

